<template>
  <div class="card">
    <a-button type="primary" icon="arrow-left" @click="goOut()">返回</a-button>
    <a-divider orientation="left"> {{ this.$route.query.date }} </a-divider>
    <div class="inputStyle">
      <a-input
        v-model="formData.search.user_realname"
        style="margin-right: 10px; width: 200px"
        class="input"
        placeholder="请输入用户姓名"
      ></a-input>
      <a-input
        v-model="formData.search.user_phone"
        style="margin-right: 10px; width: 200px"
        class="input"
        placeholder="请输入用户手机号"
      ></a-input>
      <a-button style="margin-right: 10px" type="primary" @click="getCivilianDetailList">查询</a-button>
      <a-button @click="reset">重置</a-button>
    </div>
    <a-spin :spinning="loading">
      <a-table
        :pagination="{
          pageSize: formData.page_size,
          pageSizeOptions: ['20', '30', '40', '50'],
          size: 'small',
          showSizeChanger: true,
          showQuickJumper: true,
          total: total,
          current: formData.page,
          showTotal: total => `共 ${total} 条`
        }"
        @change="paginChange"
        show-size-changer
        show-quick-jumper
        bordered
        :columns="columns"
        :data-source="data"
        :rowKey="(record, index) => index"
      >
      </a-table>
    </a-spin>
  </div>
</template>

<script>
import { getCivilianDetailListAPI } from '@/api/income.js'
export default {
  name: 'DetailPage',
  data() {
    return {
      total: 0,
      loading: false,
      formData: {
        brand_id: process.env.VUE_APP_BRAND_ID,
        date: '',
        page: 1,
        page_size: 50,
        search: {
          user_phone: '',
          user_realname: ''
        }
      },
      columns: [
        {
          title: 'ID',
          dataIndex: 'id',
          align: 'center'
        },
        {
          title: '用户id',
          dataIndex: 'uid',
          align: 'center'
        },
        {
          title: '姓名',
          dataIndex: 'realname',
          align: 'center'
        },
        {
          title: '手机号',
          dataIndex: 'phone',
          align: 'center'
        },
        {
          title: '分润日期',
          dataIndex: 'date',
          align: 'center'
        },
        {
          title: '分润金额',
          dataIndex: 'amount',
          align: 'center'
        },
        {
          title: '使用规则',
          dataIndex: 'this_rule',
          align: 'center'
        },
        {
          title: '状态',
          dataIndex: 'state_desc',
          align: 'center'
        },
        {
          title: '分润时间',
          dataIndex: 'ctime',
          align: 'center'
        }
      ],
      data: []
    }
  },
  mounted() {
    this.getCivilianDetailList()
  },
  methods: {
    paginChange(value) {
      console.log(value)
      this.formData.page = value.current
      this.formData.page_size = value.pageSize
      this.getCivilianDetailList()
    },
    goOut() {
      this.$router.push('universaldividend')
    },
    reset() {
      this.formData = {
        brand_id: process.env.VUE_APP_BRAND_ID,
        date: '',
        page: 1,
        page_size: 50,
        search: {
          user_phone: '',
          user_realname: ''
        }
      }
      this.getCivilianDetailList()
    },
    async getCivilianDetailList() {
      try {
        this.loading = true
        this.formData.date = this.$route.query.date
        const { data } = await getCivilianDetailListAPI(this.formData)
        this.data = data.list
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.card {
  padding: 10px;
  background-color: #fff;
}
.inputStyle {
  margin-bottom: 10px;
}
</style>
